﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Blog</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<style>

	</style>
</head>

<body>
    <div class="main-wrapper">
        <header>
            <nav>
                <div class="logo"><a href="index.html">海宝宝</a> </div>
                <ul>
                    <li><a href="#" class="active">首页</a> </li>
                    <li><a href="article.html">文章模版</a> </li>
                    <li><a href="#">链接3</a> </li>
                    <li id="sidebar_trigger"><a href="#">侧栏菜单</a> </li>
                </ul>
            </nav>
            <div id="banner">
                <div class="inner">
                    <h1>海宝宝</h1>
                    <p class="sub-heading">Lorem lakdsfj allk dkwien alkdien Lorem lakdsfj
                        allk dkwien alkdien Lorem lakdsfj allk dkwien alkdien</p>
                    <button>了解我</button>
                    <div class="more">
                        更多
                    </div>
                </div>
            </div>
        </header>
        <div class="content">
            <section class="green-section">
                <div class="wrapper">
                    <div>
                        <h2>一个标题</h2>
                        <div class="hr"></div>
                        <p class="sub-heading">Enlightened companies include its human resources in their</p>
                    </div>
                    <div class="icon-group">
                        <span class="icon">item1</span>
                        <span class="icon">item2</span>
                        <span class="icon">item3</span>
                    </div>
                </div>
            </section>
            <section class="gray-section">
                <div class="article-preview">
                    <div class="img-section">
                        <img src="img/pic01.jpg">
                    </div>
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">我时是副标题</div>
                        <p>
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.Enlightened companies include
                            its human resources in their estimation of the firm's worth.
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.
                        </p>
                    </div>
                </div>
                <div class="article-preview">

                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">我时是副标题</div>
                        <p>
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.Enlightened companies include
                            its human resources in their estimation of the firm's worth.
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.
                        </p>
                    </div>
                    <div class="img-section">
                        <img src="img/pic02.jpg">
                    </div>
                </div>
                <div class="article-preview">
                    <div class="img-section">
                        <img src="img/pic03.jpg">
                    </div>
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">我时是副标题</div>
                        <p>
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.Enlightened companies include
                            its human resources in their estimation of the firm's worth.
                            Enlightened companies include its human resources in their
                            estimation of the firm's worth.
                        </p>
                    </div>
                </div>
            </section>
            <section class="purple-section">
                <div class="heading-wrapper">
                    <h2>又一个标题</h2>
                    <div class="hr"></div>
                    <div class="sub-heading">Enlightened companies include its human resources
                        in their estimation of the firm's worth.Enlightened companies include</div>
                </div>
                <div class="card-group clearfix">
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                    <div class="card">
                        <h3>标题三</h3>
                        <p>Enlightened companies include its human resources
                            in their estimation of the firm's worth.Enlightened companies include</p>
                    </div>
                </div>
            </section>
        </div>
        <footer>
            <ul class="share-group">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
            </ul>
            <div class="copy">
                &copy 海宝宝 - 2018
            </div>
        </footer>
    </div>
    <div class="mask"></div>
    <div id="sidebar">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a></li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
            <li><a href="#">item5</a></li>
        </ul>
    </div>
    <button class="back-to-top">返回顶部</button>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

</body>

</html>